<template>
  <div class="cus__list__container">
    <cus-skeleton :loading="loading">
      <div class="cus__list__main">
        <div class="cus__list__item" v-for="(node) in list" :key="node.id">
          <div class="cus__list__avatar"><slot name="avatar" /></div>
          <div class="cus__list__content"><slot :data="node" /></div>
          <div class="cus__list__actions"><slot name="actions" :data="node" /></div>
        </div>
      </div>
      <cus-empty v-if="!list.length && !loading && emptyShow" />
      <div class="empty_show" v-if="!list.length && !loading && !emptyShow && !wrongShow"><slot name="emptySlot" /></div>
      <div class="empty_show" v-if="!list.length && !loading && !emptyShow && wrongShow"><slot name="wrongSlot" /></div>
      <template v-if="hasPage && list.length">
        <el-pagination
          v-model:current-page="page.current"
          v-model:page-size="page.size"
          :total="page.total"
          @current-change="request()"
          layout="prev, pager, next"
        />
      </template>
    </cus-skeleton>
  </div>
</template>
<script lang="ts">
import { PropType, computed, watch, reactive, ref } from 'vue';
import axios from 'axios';
import { AxResponse } from './../../core/axios';

interface INode {
  avatar: string;
}
type IDataSet = INode[]

export default {
  name: 'cus-list',
  props: {
    url: String,
    default: {
      type: Object,
      default: () => ({})
    },
    autoRequest: {
      type: Boolean,
      default: () => true
    },
    hasPage: {
      type: Boolean,
      default: () => false
    },
    dataSet: {
      type: Array as PropType<IDataSet>,
      default: () => []
    },
    headers: {
      type: Object,
      default: () => ({})
    },
    emptyShow: {
      type: Boolean,
      default: true
    }, //自定义空页面 true为正常显示空页面
    filterData: {
      type: Function,
    }, //自定义搜索
  },
  setup(props, { emit }) {
    let list = ref(props.dataSet);

    let loading = ref(false);

    let page = reactive({
     current: 1,
      size: 10,
      total: props.dataSet.length
    });
    let wrongShow = ref(false) //自定义错误信息页面 当emptyShow为false 同时wrongShow为true 显示
    watch(props.default, () => { page.current = 1; request() });
    let __params = {};
    const request = async (params?) => {
      params && (page.current = 1, __params = params);
      loading.value = true;
      let res = await axios.post<any, AxResponse>(props.url!, { ...props.default, ...__params, current: page.current, size: page.size }, { headers: props.headers });
      if (res.result) {
        page.total = res.json.total;
        if (props.filterData) {
          list.value = props.filterData(res.json.records)
        } else {
          list.value = res.json.records;
        }
      }else {
        wrongShow.value = true
      }
      loading.value = false;
    }
    props.url && props.autoRequest && request(props.default);

    return { list, page, request, loading, wrongShow }
  }
}
</script>
<style lang="scss" scoped>
.cus__list__container {
  padding: 18px 20px;
  border-radius: 6px;
  border: 1px solid #EBF0FC;
  box-shadow: 0px 1px 6px 0px rgba(91, 125, 255, 0.08);
  background: #fff;
  .cus__list__item {
    display: flex;
    padding: 16px 20px;
    border-radius: 10px;
    border: 1px solid #EBEEF6;
    transition: all .25s;
    &:not(:last-child) {
      margin-bottom: 20px;
    }
    &:hover {
      box-shadow: 0px 2px 11px 0px rgba(23, 18, 45, 0.2);
    }
    :deep(.cus__list__avatar) > * {
      margin-right: 20px;
    }
    .cus__list__content {
      flex: auto;
    }
    .cus__list__actions {
      display: flex;
      margin-left: auto;
    }
  }
  .el-pagination {
    margin-top: 20px;
    text-align: right;
  }
}
</style>
